<template>
    <div>
        <el-container class="container" style="margin: 0 auto;">
            <el-main class="main">
                <el-row justify="center">
                    <el-col class="header-row" :xs="24" :sm="24" :md="16">
                        <div class="notice-body">
                            <div class="notice-show">
                                <div class="title">

                                    <div style="    display: block;
    height: 79px;
    color: #015bfe;
    line-height: 79px;
    border-bottom: 1px solid #ddd;">
                                        <el-link href="javascript:history.go(-1);">返回上一页</el-link>
                                    </div>
                                    <h4 style="margin: 28px 0 55px;    font-size: 18px;    margin-bottom: 24px;">{{ showinfo.title }}</h4>
                                    <span>{{ showinfo.create_date }}</span>
                                    <span v-if="false">来源：<em>{{ showinfo.author }}</em></span>
                                    <span v-if="false">阅读量：{{ showinfo.views }}</span>
                                </div>
                                <div class="info" v-html="showinfo.editor"></div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>
<script setup lang="ts">
import {instoDetail} from '~/api/common'
import {onMounted, reactive} from "vue";
import {useRoute} from "vue-router";

let showinfo: {
    author: string
    create_date: string
    create_time: string
    editor: string, id:number,
    image:string
    instocate_id :number,
    title:string
    views:number
    weigh:number
} = reactive({
    author: "",
    create_date: "",
    create_time: "",
    editor: "", id:1,
    image:"",
    instocate_id :4,
    title:"",
    views:0,
    weigh:1
})
onMounted(async () => {
    await instoDetail({'id': useRoute().params.id}).then(res => {
        showinfo.title= res.data.title
        showinfo.author= res.data.author
        showinfo.views= res.data.views
        showinfo.image= res.data.image
        showinfo.editor= res.data.editor
        showinfo.create_date= res.data.create_date
    })
})
</script>
<style scoped lang="scss">
.notice-body {
    overflow: hidden;

    .notice-show .title {
        overflow: hidden
    }

    .notice-show .title h4 {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .notice-show .title span {
        display: inline-block;
        margin-right: 30px;
        color: #666666;
    }

    .notice-show .info {
        font-size: 16px;
        color: #666666;
        padding-bottom: 55px;
        line-height: 36px;
        overflow: hidden;
        :deep(img){
            display: block;
            max-width: 100%;
            margin: 0 auto;
        }
        :deep(p){
            :deep(img){
                display: block;
                max-width: 100%;
                margin: 0 auto;
            }
        }
    }
    .notice-show .info p img {
        display: block;
        max-width: 100%;
        margin: 0 auto;
    }
    .notice-show .other {
        overflow: hidden
    }
}
</style>
